<template>
  <el-container class="delayconclusion-form">
    <el-header height="40px" class="header">
	    <el-row type="flex" justify="space-between">
	      <span class="title">延期结题</span>
	      <div>
	      	<el-button v-show="delayconclusionRecord.yqjtbh && delayconclusionRecord.yqjtbh!='' "
          type="success" size="mini" icon="el-icon-check" @click="onSaveClick">保存</el-button>
	      	<el-button type="warning" size="mini" icon="el-icon-close" @click="onCloseClick">关闭</el-button>
	      </div>
	    </el-row>
	  </el-header>
    <el-main class="main">
      <el-form ref="delayconclusionForm" :model="delayconclusionRecord" :rules="delayconclusionRules"
      label-position="top" size="mini" status-icon>
        <el-row>
          <el-col>
            <el-form-item label="申请延期结题时间：" prop="xmsj">
              <el-date-picker style="width:100%;" v-model="delayconclusionRecord.sqyqjtsj" type="date" 
              format="yyyy年MM月" value-format="timestamp">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目进展情况：" prop="xmjzqk">
          <el-input type="textarea" v-model="delayconclusionRecord.xmjzqk" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
        </el-form-item>
        <el-form-item label="延期原因：" prop="yqyy">
          <el-input type="textarea" v-model="delayconclusionRecord.yqyy" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
        </el-form-item>
        <el-form-item label="延期原因签名日期：" prop="yqyyqmrq">
          <el-date-picker style="width:100%;" v-model="delayconclusionRecord.yqyyqmrq" type="date" 
          format="yyyy年MM月" value-format="timestamp">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目所在部门审核意见：" prop="xmszbmshyj">
          <el-input type="textarea" v-model="delayconclusionRecord.xmszbmshyj" :autosize="{minRows: 3, maxRows: 20}"></el-input>
        </el-form-item>
        <el-form-item label="项目所在部门审核日期：" prop="xmszbmshrq">
          <el-date-picker style="width:100%;" v-model="delayconclusionRecord.xmszbmshrq" type="date" value-format="timestamp" placeholder="请选择">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学校管理部门审核意见：" prop="xxzgbmpsyj">
          <el-input type="textarea" v-model="delayconclusionRecord.xxzgbmpsyj" :autosize="{minRows: 3, maxRows: 20}"></el-input>
        </el-form-item>
        <el-form-item label="学校管理部门审核日期：" prop="xxzgbmpsrq">
          <el-date-picker style="width:100%;" v-model="delayconclusionRecord.xxzgbmpsrq" type="date" value-format="timestamp" placeholder="请选择">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
import SimplePanel from "@/components/basic/SimplePanel";
import TablePanel from "@/components/basic/TablePanel";
import DynamicTable from "@/components/basic/DynamicTable";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer } from "@/utils/tableutils.js";

//meta info

var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证

export default {
  name:"DCForm",
  props: {
    formRecord: {
      type: Object
    },
    formRules: {
      type: Object
    }
  },
  components:{
    "simple-panel": SimplePanel,
    "table-panel": TablePanel,
    "dynamic-table": DynamicTable
  },
  computed:{
    
  },
  methods:{
    onSaveClick:function(){
      console.log("保存！！！");// TODO 这里需要保存一些信息，要理一下
    },
    onCloseClick:function(){// 关闭页面
      this.$emit("form-close");
    }
  },
  data(){
    return {
      delayconclusionRecord: {},
      delayconclusionRules: {}
    }
  },
  created() {
    var me = this;
    me.delayconclusionRules = me.formRules;// 冒泡进来
    me.delayconclusionRecord = me.formRecord;// 冒泡进来

  }
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss"; 

.delayconclusion-form{
  height: 100%; // 2018-06-11
  margin: 0 5px;

  .header {
    background-color: $--border-level-3;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;

    .title {
      font-size: 20px;
      color: $--color-primary;
    }
  }

  .main {
    // height: 100%;
    margin: 0;
    padding: 0;
    
    .el-form-item label{
      float: left;
    }
  }
}
</style>
